<template>
  <view class="wrap">
    <view class="banner-box">
      <kevy-swiper
        :list="bannerList"
        :width="684"
        :height="480"
        :autoPlay="true"
        :autoPlayInterval="5000"
        :showDot="true"
        :descAniType="'slideFromRight'"
        :dotColor="'#E5E6EB'"
        :dotSelectedColor="'#00D1B6'"
      />
    </view>

    <view class="list">
      <view class="list-item" v-for="(item, index) in listData" :key="index">
        <view class="title">
          <view class="title-icon" />
          <text class="title-text">{{ item.title }}</text>
        </view>
        <view class="content">
          <text class="content-text">
            {{ item.content }}
          </text>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import KevySwiper from '@/module/src/components/kevy-swiper.vue'

const bannerList = reactive([
  {
    pageUrl: `/module/src/pages/sleep/relax/index`,
    imgUrl: `https://ainengli.hzjrsw.com/jkhx/weight/banner1.png`
  },
  {
    pageUrl: `/module/src/pages/sleep/music/index`,
    imgUrl: `https://ainengli.hzjrsw.com/jkhx/weight/banner3.png`
  },
  {
    pageUrl: `/module/src/pages/sleep/sleepAssessment/index`,
    imgUrl: `https://ainengli.hzjrsw.com/jkhx/weight/banner4.png`
  }
])

const listData = reactive([
  {
    title: '“478”呼吸法',
    content: `美国亚利桑那州综合医学中心创建者安德鲁•韦尔医生所发明的“478”呼吸法对助眠和减压有很好的效果。坐在床上，后背挺直；用舌尖顶住上颚；闭上嘴，用鼻子吸气（数4下），保持住气息（数7下），然后用嘴呼气（数8下），重复4遍。`
  },
  {
    title: '冥想式呼吸',
    content: `心绪烦乱时应尝试8~10分钟冥想呼吸。英国神经科学家、冥想专家凯瑟琳•克尔研究发现，把注意力与呼吸的起伏联系起来，能放松肌肉，消散负面情绪。`
  },
  {
    title: '鼻孔交替呼吸',
    content: `张口呼吸是在潜意识中告诉大脑身体正承受压力；而用鼻子呼吸是向大脑发出放松信号。睡前坐在舒服的位置，后背挺直，闭上双眼；用右手无名指按住左鼻孔，吸气；然后用右手拇指按住右鼻孔，呼气；重复上述过程，很快就会产生睡意。`
  }
])
</script>
<style lang="scss" scoped>
.wrap {
  width: 100%;
  min-height: 100vh;
  padding: 34rpx 32rpx;
  background-color: #fff;
}

.banner-box {
  width: 100%;
  height: 546rpx;
  margin-bottom: 16rpx;
}

.list {
  .list-item {
    margin-bottom: 50rpx;
  }
}

.title {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;

  .title-icon {
    width: 8rpx;
    height: 32rpx;
    margin-right: 16rpx;
    background-color: #00d1b6;
    border-radius: 0 4rpx 4rpx 0;
  }

  .title-text {
    font-size: 36rpx;
    font-weight: 700;
    color: #222;
  }
}

.content {
  padding: 32rpx 32rpx 32rpx 34rpx;
  font-size: 28rpx;
  font-weight: 500;
  color: #222;
  background: rgb(0 209 182 / 5%);
  border-radius: 24rpx;

  .content-text {
    display: block;
    line-height: 50rpx;
    text-align: justify;
  }
}
</style>
